<template>
    <div class="subject">
        <div class="left">
            <div class="left_1">
                <div class="user_title">欢迎回来！ 一可</div>
                <a-divider class="divider" />
                <div class="grid">
                    <a-grid :cols="{ xxl: 4, lg: 2, xs: 2, sm: 2, md: 2, xl: 4 }" :colGap="12" :rowGap="16"
                        class="grid-demo-grid">
                        <a-grid-item class="demo-item">
                            <div class="demo-item-list">
                                <img src="../../../public/WorkBench_Img/min.png" alt="">
                                <div class="demo-item-list-div">
                                    <div style="color: rgb(78, 89, 105);">播放量</div>
                                    <div style="font-size: 24px;color: rgb(0, 174, 236);">6666</div>
                                </div>
                            </div>
                        </a-grid-item>
                        <a-grid-item class="demo-item">
                            <div class="demo-item-list">
                                <img src="../../../public/WorkBench_Img/bi.png" alt="">
                                <div class="demo-item-list-div">
                                    <div style="color: rgb(78, 89, 105);">投币</div>
                                    <div style="font-size: 24px;color: rgb(0, 174, 236);">6666</div>
                                </div>
                            </div>
                        </a-grid-item>
                        <a-grid-item class="demo-item">
                            <div class="demo-item-list">
                                <img src="../../../public/WorkBench_Img/fengsi.png" alt="">
                                <div class="demo-item-list-div">
                                    <div style="color: rgb(78, 89, 105);">净增粉丝</div>
                                    <div style="font-size: 24px;color: rgb(0, 174, 236);">6666</div>
                                </div>
                            </div>
                        </a-grid-item>
                        <a-grid-item class="demo-item">
                            <div class="demo-item-list">
                                <img src="../../../public/WorkBench_Img/like.png" alt="">
                                <div class="demo-item-list-div">
                                    <div style="color: rgb(78, 89, 105);">点赞</div>
                                    <div style="font-size: 24px;color: rgb(0, 174, 236);">6666</div>
                                </div>
                            </div>
                        </a-grid-item>
                    </a-grid>
                </div>
                <div ref="chartlayout" class="chart">
                    <div style="width:100%;height: 100%;" ref="chart"></div>
                </div>
            </div>
            <div class="left_2">
                <div class="left_2_01">
                    <div class="left_2_01-div">
                        <div>我的热门内容</div>
                        <a href="">查看更多</a>
                    </div>

                    <div class="div-list">
                        <div class="at">文本</div>
                        <div>图片</div>
                        <div>视频</div>
                    </div>

                    <a-table class="a-table" :bordered="{ cell: true }" :columns="columns" :data="data" />
                </div>
                <div class="left_2_02">
                    <div class="left_2_02-title">内容类型占比</div>
                    <div class="left_2_02-charts" ref="charts"></div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right_01">
                <div class="title">快捷操作</div>
                <a-row class="grid-demo">
                    <a-col :span="8">
                        <div class="list">
                            <icon-heart-fill />
                            <div>我的喜欢</div>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="list">
                            <icon-star-fill />
                            <div>我的收藏</div>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="list">
                            <icon-thumb-up-fill />
                            <div>我的点赞</div>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div class="right_02">
                <a-carousel :style="{
                    width: '100%',
                    height: '200px',
                }" :auto-play="true" indicator-type="dot" show-arrow="hover">
                    <a-carousel-item v-for="image in images">
                        <img :src="image" :style="{
                            width: '100%', height: '100%'
                        }" />
                    </a-carousel-item>
                </a-carousel>
            </div>
            <div class="right_03">
                <div class="title">公告通知</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, onUpdated } from 'vue';
import * as echarts from 'echarts'

// 轮播图
const images = ref([
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
]);

const chart = ref(null);

const ChartData = ref({
    tooltip: {
        // 触发类型，默认数据触发，可选为：'item' | 'axis'
        show: true,
        trigger: 'axis'
    },
    title: {
        text: '核心数据概览',
        textStyle: { // 文本样式
            fontStyle: 'normal', // 字体风格
            fontWeight: 'lighter', // 字体粗细
            fontSize: 16, // 字体大小
            fontFamily: 'sans-serif' // 字体系列
        },

    },
    series: [
        {
            name: '点赞',
            data: [6, 8, 10, 8, 6, 8, 5, 7, 11],
            type: 'line',
            areaStyle: {},
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(208, 231, 255)' // 渐变起始颜色
                }, {
                    offset: 1,
                    color: 'rgba(255,255,255)' // 渐变结束颜色
                }]),
            },
            symbol: 'none', // 不显示坐标点
            lineStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1ee5ff' }, // 0% 处的颜色
                    { offset: 0.5, color: '#23a5ff' }, // 50% 处的颜色
                    { offset: 1, color: '#6e44fb' } // 100% 处的颜色
                ]),
                width: 2
            }
        }
    ],
    xAxis: {
        type: 'category',
        data: ['          24/01', '24/02', '24/03', '24/04', '24/05', '24/06', '24/07', '24/08', '24/09            '],
        axisLine: {
            show: false // 隐藏X轴的线段
        },
        axisTick: {
            show: false, // 隐藏X轴刻度

        },
        splitLine: {
            show: true, // 是否显示网格线
            lineStyle: {
                // 网格线的样式
                color: '#ccc', // 网格线颜色
                type: 'dashed' // 网格线类型
            }
        },
        boundaryGap: false,

    },
    grid: {
        left: '3%',   // 保留左边的一定百分比用于 Y 轴，也可以设置为具体的像素值，例如 '50px'
        right: '1%',  // 保留右边的一定百分比，用于 X 轴的标签显示
        bottom: '3%', // 保留底部的一定百分比，用于 X 轴
        containLabel: true // 确保标签完全显示

    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                // 网格线的样式
                color: '#ccc', // 网格线颜色
                type: 'dashed' // 网格线类型
            }
        },

    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
})

onMounted(() => {
    console.log(chart.value);


    echarts.init(charts.value).setOption(chartsData.value)
})

const columns = ref([
    {
        title: '排名',
        dataIndex: 'Ranking',
    },
    {
        title: '内容',
        dataIndex: 'Content',
    },
    {
        title: '点赞',
        dataIndex: 'like',
    },
    {
        title: '日涨幅',
        dataIndex: 'rose',
    },
]);

const data = reactive([{
    key: '1',
    Ranking: 'Jane Doe',
    like: 23000,
    Content: '32 Park Road, London',
    rose: '7.9%'
}, {
    key: '2',
    Ranking: 'Alisa Ross',
    like: 25000,
    Content: '35 Park Road, London',
    rose: '8.6%'
}, {
    key: '3',
    Ranking: 'Kevin Sandra',
    like: 22000,
    Content: '31 Park Road, London',
    rose: '12%'
}, {
    key: '4',
    Ranking: 'Kevin Sandra',
    like: 22000,
    Content: '31 Park Road, London',
    rose: '12%'
}, {
    key: '4',
    Ranking: 'Kevin Sandra',
    like: 22000,
    Content: '31 Park Road, London',
    rose: '12%'
}, {
    key: '4',
    Ranking: 'Kevin Sandra',
    like: 22000,
    Content: '31 Park Road, London',
    rose: '12%'
}]);



const charts = ref(null)
const chartsData = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '0%',
        left: 'center',
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 2,
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],

        }
    ]
});

// 创建初始化实例
let chartint = ref(null)
function create() {
    setTimeout(() => {
        chartint.value = echarts.init(chart.value)
        chartint.value.setOption(ChartData.value)
    }, 0)
}

function debounce(func, time) {
    // 当窗口大小改变时，这里的代码会被执行
    let timeId = null
    return function (...arr) {
        if (timeId) {
            clearTimeout(timeId)
        }
        timeId = setTimeout(() => {
            func.apply(this, arr)
            timeId = null
        }, time);

    }
}

function dispose() {
    if (chartint.value) {
        chartint.value.dispose();
        chartint.value = null

        create()
    }
}

const ret_debounce = ref(debounce(dispose, 1000))
function setwindow() {
    window.addEventListener('resize', function (event) {
        ret_debounce.value()
    });
}
onMounted(() => {
    create()
    setwindow()
})
</script>
<style lang="scss" scoped>
* {
    color: #000;
}

a {
    text-decoration: none;
    color: rgb(22, 93, 255);
}

.chart {
    width: 100%;
    height: 99%;
    border: 1px solid #ccc;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-weight: lighter;

    div {
        width: 100%;
    }
}

.grid-demo-grid .demo-item,
.grid-demo-grid .demo-suffix {
    border-right: solid 1px #ccc;
    height: 70px;
    line-height: 70px;
    color: var(--color-white);
    text-align: center;
    color: #999999;

}


.grid {
    padding-left: 20px;
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
}


.demo-item-list {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 54px;
        height: 54px;
    }

    .demo-item-list-div {
        width: 120px;
        height: 100%;
        line-height: 35px;


        div {
            width: 100%;
            height: 50%;
        }
    }
}

.subject {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: #f2f3f5;
    display: flex;
}

.left {
    width: 77%;
    height: auto;
    margin: 30px;
    background-color: #f2f3f5;

    .left_1 {
        width: 100%;
        height: 560px;
        background-color: #fff;
        display: flex;
        flex-direction: column;

        .user_title {
            height: 50px;
            width: 100%;
            padding: 20px;
            padding-bottom: 0px;
            color: #000;
            font-size: 20px;
            text-align: left;
            font-weight: 500;
        }

        .divider {
            margin: 0;
        }
    }

    .left_2 {
        padding-top: 20px;
        margin-top: 15px;
        width: 100%;
        height: auto;
        background-color: #f2f3f5;
        display: flex;
        justify-content: space-between;

        .left_2_01 {
            width: 49%;
            height: 100%;
            background-color: #fff;

            .left_2_01-div {
                padding-top: 16px;
                width: 95%;
                margin: auto;
                display: flex;
                justify-content: space-between;
                font-weight: 500;
                font-size: 16px;

                div {
                    color: rgb(29, 33, 41);
                }
            }

            .div-list {
                margin: 20px;
                margin-left: 32px;
                width: 36%;
                display: flex;
                background-color: #f2f3f5;
                padding: 4px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;

                div {
                    width: 60px;
                    padding: 7px;

                }

                .at {
                    background-color: #fff;
                }

            }

            .a-table {
                width: 90%;
                margin: auto;
            }
        }

        .left_2_02 {
            width: 49%;
            height: 400px;
            background-color: #fff;

            .left_2_02-title {
                margin: 20px;
                text-align: left;
                font-weight: 500;
                font-size: 16px;
            }

            .left_2_02-charts {
                width: 100%;
                height: 80%;
            }
        }
    }
}

.right {
    width: 18%;
    height: auto;
    margin-top: 30px;
    margin-left: 5px;
    background-color: #f2f3f5;


    .right_01 {
        width: 100%;
        height: 240px;
        background-color: #fff;

        .title {
            text-align: left;
            padding-top: 20px;
            padding-left: 20px;
            font-weight: 500;
            font-size: 16px;
        }

        .grid-demo {
            width: 90%;
            height: auto;
            margin: auto;
            margin-top: 40px;

            .list {

                div {
                    font-size: 14px;
                }
            }
        }
    }

    .right_02 {
        margin-top: 20px;
        width: 100%;
        height: auto;
        background-color: #fff;


    }

    .right_03 {
        margin-top: 20px;
        width: 100%;
        height: 480px;
        background-color: #fff;

        .title {
            text-align: left;
            padding-top: 20px;
            padding-left: 20px;
            font-weight: 500;
            font-size: 16px;
        }
    }
}
</style>
